<template>
  <MyLayout>
    <template #left>
      <div class="left">
        <a-input
          v-model:value="filterText"
          class="filterSearch"
          allowClear
          :maxlength="20"
          @change="onChangeFilter"
          placeholder="输入关键字进行查找"
        />
        <a-tree
          :tree-data="DictItem"
          style="margin-top: 20px"
          :autoExpandParent="true"
          blockNode
          defaultExpandAll
          show-icon
          @select="onSelectTree"
          :fieldNames="{ title: 'text', key: 'value' }"
        >
          <template #icon="{ value }">
            <template v-if="value === '0'">
              <appstore-outlined />
            </template>
            <template v-else>
              <star-outlined />
            </template>
          </template>
        </a-tree>
      </div>
    </template>
    <template #right>
      <a-card v-if="childrenId === '0'" style="height: 100%">
        <MyTable
          :columns="columns"
          useNumber
          :tableData="DictItem[0].children"
        />
      </a-card>
      <MYTable :fileType="childrenId" v-else />
    </template>
  </MyLayout>
</template>

<script setup lang="ts">
import MyLayout from "@/components/layout/index.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import MYTable from "./components/disclosure/disclosureFile.vue";
import { ref, onMounted } from "vue";
import { StarOutlined, AppstoreOutlined } from "@ant-design/icons-vue";
onMounted(() => {});
const filterText = ref("");
const onChangeFilter = () => {};
const onSelectTree = (_: any, e: any) => {
  childrenId.value = e.node.key;
};
const childrenId = ref("0");

const DictItem = [
  {
    text: "公开列表",
    value: "0",
    children: [
      {
        text: "机构概况",
        value: "机构概况",
      },
      {
        text: "领导信息",
        value: "领导信息",
      },
      {
        text: "动态要闻",
        value: "动态要闻",
      },
      {
        text: "通知公告",
        value: "通知公告",
      },
      {
        text: "政策文件",
        value: "政策文件",
      },
      {
        text: "数据发布",
        value: "数据发布",
      },
      {
        text: "财政信息",
        value: "财政信息",
      },
      {
        text: "人事信息",
        value: "人事信息",
      },
      {
        text: "规划计划",
        value: "规划计划",
      },
    ],
  },
];
/** 表格数据的渲染功能 */
const columns = [
  {
    title: "文件类型",
    dataIndex: "value",
    isShow: true,
    align: "center",
  },
  {
    title: "文件数量",
    dataIndex: "",
    isShow: true,
    align: "center",
    customRender: () => {
      return "9个文件";
    },
  },
];
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
.left {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  /* 设置滚动条的样式 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  /* 滚动条滑块 */
}
.filterSearch {
  width: 100%;
}
</style>
